CSS Logische Eigenschaften Level 2: Aufbau eines wirklich globalen Webs mit verbesserter Unterstützung des Schreibmodus

Seit Jahrzehnten entwickeln Webentwickler Layouts mit einem Vokabular, das in der physischen Welt verwurzelt ist: oben, unten, links und rechts. Wir setzen einen margin-left, einen padding-top und einen border-right. Dieses mentale Modell hat uns gute Dienste geleistet, als das Web überwiegend ein Medium von links nach rechts und von oben nach unten war. Das Web ist jedoch global. Es ist eine Plattform für alle Sprachen und Kulturen, von denen viele nicht diesem einfachen Richtungsfluss folgen.

Sprachen wie Arabisch und Hebräisch werden von rechts nach links geschrieben. Traditionelles Japanisch und Chinesisch können vertikal, von oben nach unten und von rechts nach links geschrieben werden. Die Aufzwingung eines physischen, von links nach rechts verlaufenden CSS-Modells auf diese Schriftsysteme führt zu fehlerhaften Layouts, einer frustrierenden Benutzererfahrung und einem Berg von Code-Überschreibungen. Hier kommen die logischen Eigenschaften und Werte von CSS ins Spiel, die einen grundlegenden Paradigmenwechsel von physischen Richtungen zu flussrelativen, logischen Richtungen darstellen. Während Level 1 die Grundlage legte, vervollständigt CSS Logical Properties Level 2 das Bild und bietet die Werkzeuge, die wir benötigen, um wirklich universelle, schreibmodus-fähige Benutzeroberflächen zu erstellen.

Dieser umfassende Leitfaden nimmt Sie mit auf einen tiefen Tauchgang in die Verbesserungen, die Level 2 mit sich bringt. Wir beginnen mit einer Auffrischung der Kernkonzepte, erkunden dann die neuen Eigenschaften und Werte, die die Lücken füllen, und setzen dies schließlich in die Praxis um, indem wir eine Komponente erstellen, die sich nahtlos an jeden Schreibmodus anpasst. Bereiten Sie sich darauf vor, die Art und Weise, wie Sie über CSS-Layout denken, für immer zu verändern.

Eine kurze Auffrischung: Die Kernkonzepte der logischen Eigenschaften (Level 1)

Bevor wir die Ergänzungen in Level 2 würdigen können, müssen wir ein solides Verständnis der Grundlagen haben, die von Level 1 gelegt wurden. Das gesamte System basiert auf zwei Schlüsselkonzepten: dem Schreibmodus und den daraus resultierenden Block- und Inline-Achsen.

Die vier Schreibmodi

Die CSS-Eigenschaft writing-mode bestimmt die Richtung, in der Text angeordnet wird. Während wir die Standardeinstellung oft als selbstverständlich ansehen, gibt es mehrere Werte, die grundlegend ändern, wie Inhalte auf der Seite fließen:

• horizontal-tb: Dies ist die Standardeinstellung für die meisten westlichen Sprachen. Text fließt horizontal (Inline-Achse) von links nach rechts (oder von rechts nach links, basierend auf der Richtung), und Linien stapeln sich von oben nach unten (Block-Achse).
• vertical-rl: Wird für traditionelle ostasiatische Typografie verwendet (z. B. Japanisch, Chinesisch). Text fließt vertikal von oben nach unten (Inline-Achse), und Linien stapeln sich von rechts nach links (Block-Achse).
• vertical-lr: Ähnlich wie oben, aber Linien stapeln sich von links nach rechts (Block-Achse). Weniger verbreitet, wird aber in einigen Kontexten wie der mongolischen Schrift verwendet.
• sidelong-rl / sidelong-lr: Diese sind für spezifische Anwendungsfälle gedacht, in denen Sie Glyphen auf die Seite legen möchten. Sie sind im Allgemeinen in Web-Inhalten weniger verbreitet.

Das entscheidende Konzept: Block- vs. Inline-Achse

Dies ist das wichtigste Konzept, das es zu verstehen gilt. In einer logischen Welt hören wir auf, über "vertikal" und "horizontal" nachzudenken, und beginnen, in Bezug auf die Block- und Inline-Achse zu denken. Ihre Ausrichtung hängt vollständig vom writing-mode ab.

• Die Inline-Achse ist die Richtung, in der Text innerhalb einer einzelnen Zeile fließt.
• Die Block-Achse ist die Richtung, in der neue Zeilen gestapelt werden.

Sehen wir uns an, wie sich dies auswirkt:

• In Standard-Englisch (writing-mode: horizontal-tb): Die Inline-Achse verläuft horizontal und die Block-Achse verläuft vertikal.
• Im traditionellen Japanisch (writing-mode: vertical-rl): Die Inline-Achse verläuft vertikal und die Block-Achse verläuft horizontal.

Da diese Achsen wechseln können, werden Eigenschaften wie width und height mehrdeutig. Ist width die Größe entlang der horizontalen Achse oder der Inline-Achse? Logische Eigenschaften lösen diese Mehrdeutigkeit. Wir haben jetzt start und end für jede Achse:

• block-start: Das "oben" im Englischen, aber das "rechts" im vertikalen Japanisch.
• block-end: Das "unten" im Englischen, aber das "links" im vertikalen Japanisch.
• inline-start: Das "links" im Englischen, aber das "oben" im vertikalen Japanisch.
• inline-end: Das "rechts" im Englischen, aber das "unten" im vertikalen Japanisch.

Zuordnung physischer zu logischen Eigenschaften (Level 1)

Level 1 führte einen umfassenden Satz von Zuordnungen von physischen zu logischen Eigenschaften ein. Hier sind einige wichtige Beispiele:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (zur Positionierung) → inset-inline-start / inset-inline-end
• top / bottom (zur Positionierung) → inset-block-start / inset-block-end

Level 1 gab uns auch nützliche Kurzschreibweisen wie margin-inline (für Start und Ende) und padding-block (für Start und Ende).

Willkommen zu Level 2: Was ist neu und warum ist es wichtig?

Während Level 1 ein monumentaler Schritt nach vorne war, hinterließ es einige spürbare Lücken. Bestimmte grundlegende CSS-Eigenschaften wie float, clear und resize hatten keine logischen Entsprechungen. Darüber hinaus konnten Eigenschaften wie border-radius nicht logisch gesteuert werden, was Entwickler zwang, für feingranulare Stile auf physische Eigenschaften zurückzugreifen. Dies bedeutete, dass Sie ein Layout zu 90 % mit logischen Eigenschaften erstellen konnten, aber dennoch physische Überschreibungen für verschiedene Schreibmodi benötigten, was den Zweck teilweise zunichte machte.

CSS Logical Properties Level 2 behebt diese Mängel direkt. Es geht nicht darum, ein radikal neues System einzuführen, sondern darum, das in Level 1 begonnene System zu vervollständigen. Dies wird auf zwei Hauptarten erreicht:

1. Einführung neuer logischer Eigenschaften und Werte für ältere CSS-Funktionen, die von Natur aus physisch waren (wie float).
2. Hinzufügen logischer Eigenschaftszuordnungen für komplexe Kurzschreibweisen, die zuvor ignoriert wurden (wie border-radius).

Mit Level 2 ist die Vision eines vollständig flussrelativen Stilsystems nahezu abgeschlossen, sodass wir komplexe, schöne und robuste Komponenten erstellen können, die überall und für jeden ohne Hacks oder Überschreibungen funktionieren.

Tiefer Einblick: Neue logische Werte und Eigenschaften in Level 2

Lassen Sie uns die wichtigsten Ergänzungen untersuchen, die Level 2 in unser Entwickler-Toolkit bringt. Dies sind die Werkzeuge, die die Lücken füllen und wirklich universelles Komponentendesign ermöglichen.

Float und Clear: Die logische Revolution

Die Eigenschaft float ist seit Jahren ein Eckpfeiler des CSS-Layouts, aber ihre Werte left und right sind die Definition der physischen Richtung. Wenn Sie ein Bild in Englisch links neben einem Absatz floaten, sieht es korrekt aus. Wenn Sie jedoch die Dokumentrichtung für Arabisch auf Rechts-nach-Links (RTL) umstellen, befindet sich das Bild jetzt auf der "falschen" Seite des Textblocks. Es sollte sich rechts befinden, was der Anfang der Zeile ist.

Level 2 führt zwei neue, logische Schlüsselwörter für die Eigenschaft float ein:

• float: inline-start; Dies floatet ein Element zum Anfang der Inline-Richtung. In LTR-Sprachen ist dies links. In RTL-Sprachen ist es rechts. In einem vertikal-rl-Schreibmodus ist es oben.
• float: inline-end; Dies floatet ein Element zum Ende der Inline-Richtung. In LTR ist dies rechts. In RTL ist es links. In vertikal-rl ist es unten.

In ähnlicher Weise erhält die Eigenschaft clear, die zum Steuern des Umbruchs von Inhalten um gefloatete Elemente verwendet wird, ihre logischen Gegenstücke:

• clear: inline-start; Löscht Floats auf der Inline-Start-Seite.
• clear: inline-end; Löscht Floats auf der Inline-End-Seite.

Dies ist ein Wendepunkt. Sie können jetzt klassische Bild-mit-Text-Umbruch-Layouts erstellen, die sich automatisch an jede Sprachrichtung anpassen, ohne eine einzige Zeile zusätzlichen CSS.

Verbesserte Steuerung mit logischer Größenänderung

Die Eigenschaft resize, die üblicherweise auf einem textarea-Element verwendet wird, ermöglicht es Benutzern, die Größe eines Elements zu ändern. Seine traditionellen Werte sind horizontal, vertical und both. Aber was bedeutet "horizontal" in einem vertikalen Schreibmodus? Es bedeutet immer noch, die Größe entlang der physischen horizontalen Achse zu ändern, was möglicherweise nicht das ist, was der Benutzer oder Designer beabsichtigt. Der Benutzer möchte wahrscheinlich die Größe des Elements entlang seiner Inline-Achse ändern, um Linien länger oder kürzer zu machen.

Level 2 führt logische Werte für resize ein:

• resize: inline; Ermöglicht die Größenänderung entlang der Inline-Achse.
• resize: block; Ermöglicht die Größenänderung entlang der Block-Achse.

Die Verwendung von resize: block; auf einem Textbereich in Englisch ermöglicht es dem Benutzer, ihn höher zu machen. Die Verwendung in einem vertikalen Schreibmodus ermöglicht es dem Benutzer, ihn breiter zu machen (was die Blockrichtung ist). Es funktioniert einfach.

`caption-side`: Logische Positionierung für Tabellenbeschriftungen

Die Eigenschaft caption-side bestimmt die Platzierung der caption einer Tabelle. Die alten Werte waren top und bottom. Auch diese sind physisch. Wenn die Absicht eines Designers darin besteht, die Beschriftung "vor" dem Inhalt der Tabelle zu platzieren, funktioniert top für horizontale Schreibmodi. In einem vertikal-rl-Modus befindet sich der "Start" des Blockflusses jedoch rechts, nicht oben.

Level 2 bietet die logische Lösung:

• caption-side: block-start; Platziert die Beschriftung am Anfang des Blockflusses.
• caption-side: block-end; Platziert die Beschriftung am Ende des Blockflusses.

`text-align`: Ein grundlegender logischer Wert

Obwohl die Werte start und end für text-align schon seit einiger Zeit existieren, sind sie ein Kernbestandteil der Philosophie der logischen Eigenschaften und es lohnt sich, sie zu verstärken. Die Verwendung von text-align: left; ist ein häufiger Fehler, der sofort Layoutprobleme in RTL-Sprachen verursacht. Der korrekte, moderne Ansatz ist immer die Verwendung von:

• text-align: start; Richtet Text am Anfang der Inline-Richtung aus.
• text-align: end; Richtet Text am Ende der Inline-Richtung aus.

Das Prunkstück von Level 2: Logischer `border-radius`

Die vielleicht bedeutendste und leistungsstärkste Ergänzung in Level 2 ist der Satz von Eigenschaften zum logischen Steuern von Border-Radius. Wenn Sie zuvor wollten, dass eine Karte nur an der "Oberseite" abgerundete Ecken hat, würden Sie border-top-left-radius und border-top-right-radius verwenden. Dies bricht in einem vertikalen Schreibmodus vollständig zusammen, in dem die "oberen" Ecken jetzt die start-start- und end-start-Ecken sind.

Level 2 führt vier neue Longhand-Eigenschaften ein, die auf flussrelative Weise den vier Ecken eines Elements zugeordnet werden. Die Namenskonvention ist border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Die Ecke, an der die Block-Start- und Inline-Start-Seite zusammentreffen.
• border-start-end-radius: Die Ecke, an der die Block-Start- und Inline-End-Seite zusammentreffen.
• border-end-start-radius: Die Ecke, an der die Block-End- und Inline-Start-Seite zusammentreffen.
• border-end-end-radius: Die Ecke, an der die Block-End- und Inline-End-Seite zusammentreffen.

Dies kann anfangs schwierig zu visualisieren sein, daher lassen Sie uns es für verschiedene Schreibmodi zuordnen:

Zuordnung von `border-radius` in `writing-mode: horizontal-tb` (z. B. Englisch)

• border-start-start-radius wird top-left-radius zugeordnet.
• border-start-end-radius wird top-right-radius zugeordnet.
• border-end-start-radius wird bottom-left-radius zugeordnet.
• border-end-end-radius wird bottom-right-radius zugeordnet.

Zuordnung von `border-radius` in `writing-mode: horizontal-tb` mit `dir="rtl"` (z. B. Arabisch)

Hier wird die Inline-Richtung umgedreht.

• border-start-start-radius wird top-right-radius zugeordnet. (Block-Start ist oben, Inline-Start ist rechts).
• border-start-end-radius wird top-left-radius zugeordnet.
• border-end-start-radius wird bottom-right-radius zugeordnet.
• border-end-end-radius wird bottom-left-radius zugeordnet.

Zuordnung von `border-radius` in `writing-mode: vertical-rl` (z. B. Japanisch)

Hier werden beide Achsen gedreht.

• border-start-start-radius wird top-right-radius zugeordnet. (Block-Start ist rechts, Inline-Start ist oben).
• border-start-end-radius wird bottom-right-radius zugeordnet.
• border-end-start-radius wird top-left-radius zugeordnet.
• border-end-end-radius wird bottom-left-radius zugeordnet.

Durch die Verwendung dieser neuen Eigenschaften können Sie Eckradien definieren, die semantisch an den Fluss des Inhalts gebunden sind, nicht an den physischen Bildschirm. Eine "Start-Start"-Ecke ist immer die richtige Ecke, unabhängig von Sprache oder Textrichtung.

Praktische Implementierung: Erstellen einer global-fähigen Komponente

Theorie ist großartig, aber sehen wir uns an, wie dies in der Praxis funktioniert. Wir erstellen eine einfache Profilkartenkomponente, zuerst mit den alten physischen Eigenschaften, und refaktorisieren sie dann, um moderne logische Eigenschaften aus Level 1 und Level 2 zu verwenden.

Die Karte hat ein auf einer Seite gefloatetes Bild, einen Titel, etwas Text und einen dekorativen Rahmen und abgerundete Ecken.

Der "alte" Weg: Eine brüchige Karte mit physischen Eigenschaften

So hätten wir diese Karte vor einigen Jahren möglicherweise gestaltet:

/* --- CSS (Physische Eigenschaften) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

In einem Standard-Englisch-LTR-Kontext sieht dies gut aus. Wenn wir dies jedoch in einem Container mit dir="rtl" oder writing-mode: vertical-rl platzieren, bricht das Layout zusammen. Der dekorative Rahmen befindet sich auf der falschen Seite, der Avatar befindet sich auf der falschen Seite, der Rand ist falsch und die abgerundeten Ecken sind falsch platziert.

Der "neue" Weg: Eine robuste Karte mit logischen Eigenschaften

Lassen Sie uns nun dieselbe Komponente mithilfe logischer Eigenschaften refaktorisieren. Wir werden Eigenschaften sowohl aus Level 1 als auch aus den neuen Ergänzungen aus Level 2 nutzen.

/* --- CSS (Logische Eigenschaften) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` Kurzform ist bereits logisch! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Level 2 Power! */

  border-end-start-radius: 8px; /* Level 2 Power! */

}

.logical-card .avatar {

  float: inline-start; /* Level 2 Power! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testen und Überprüfen

Mit diesem neuen CSS können Sie die Komponente in einen beliebigen Container einfügen, und sie passt sich automatisch an.

• In einem LTR-Kontext: Es sieht identisch mit der ursprünglichen physischen Version aus.
• In einem RTL-Kontext (dir="rtl"): Der Avatar wird nach rechts gefloatet, sein Rand befindet sich links, der dekorative Rahmen befindet sich rechts und der Text ist start-ausgerichtet (nach rechts). Die abgerundeten Ecken befinden sich korrekt oben rechts und unten rechts. Es funktioniert einfach.
• In einem vertikalen Kontext (writing-mode: vertical-rl): Die "Breite" der Karte (jetzt ihre vertikale inline-size) beträgt 300 Pixel. Der Avatar wird nach "oben" (inline-start) mit einem Rand an seiner "Unterseite" (inline-end) gefloatet. Der dekorative Rahmen befindet sich auf der rechten Seite (inline-start), und die abgerundeten Ecken befinden sich oben rechts und oben links. Die Komponente hat sich ohne Media Queries oder Überschreibungen vollständig korrekt neu ausgerichtet.

Browser-Unterstützung und Fallbacks

Das klingt alles fantastisch, aber was ist mit der Browser-Unterstützung? Die gute Nachricht ist, dass die Unterstützung für Level 1 logische Eigenschaften in allen modernen Browsern ausgezeichnet ist. Sie können und sollten heute Eigenschaften wie margin-inline-start und padding-block verwenden.

Die Unterstützung für die neueren Level 2-Funktionen verbessert sich rasant, ist aber noch nicht universell. Die logischen Werte für float, clear und resize werden gut unterstützt. Die logischen border-radius-Eigenschaften sind die neuesten und befinden sich möglicherweise noch hinter Feature-Flags oder in neueren Browser-Versionen. Wie immer sollten Sie Ressourcen wie MDN Web Docs oder CanIUse.com für die aktuellsten Kompatibilitätsdaten konsultieren.

Strategien für Progressive Enhancement

Da CSS so konzipiert ist, dass es widerstandsfähig ist, können wir problemlos Fallbacks für ältere Browser bereitstellen. Die Kaskade stellt sicher, dass ein Browser eine logische Eigenschaft einfach ignoriert und die zuvor definierte physische Eigenschaft verwendet, wenn er sie nicht versteht.

So können Sie Fallback-fähiges CSS schreiben:

.card {

  /* Fallback für ältere Browser */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderne logische Eigenschaft, die das Fallback überschreibt */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Dieser Ansatz gewährleistet eine solide Baseline-Erfahrung für alle und bietet gleichzeitig das verbesserte, adaptive Layout für Benutzer moderner Browser. Für Projekte, die nicht mehrere Schreibmodi unterstützen müssen, ist dies möglicherweise übertrieben. Für jede globale Anwendung, jedes Designsystem oder jedes Thema ist dies jedoch eine robuste und zukunftssichere Strategie.

Die Zukunft ist logisch: Über Level 2 hinaus

Der Übergang von einer physischen zu einer logischen Denkweise ist eine der wichtigsten Veränderungen im modernen CSS. Es richtet unsere Stilsprache an der Realität eines vielfältigen, globalen Webs aus. Es bewegt uns weg von brüchigen, bildschirmorientierten Hacks hin zu widerstandsfähigem, inhaltsorientiertem Design.

Gibt es noch Lücken? Ein paar. Logische Werte für Eigenschaften wie background-position oder Farbverläufe werden noch diskutiert. Mit der Veröffentlichung von Level 2 kann jedoch die überwiegende Mehrheit der alltäglichen Layout- und Stilaufgaben jetzt mit einem rein logischen Ansatz ausgeführt werden.

Der Aufruf zum Handeln für Entwickler ist klar: Beginnen Sie, logische Eigenschaften standardmäßig zu verwenden. Machen Sie inline-size zu Ihrem Go-to anstelle von width. Verwenden Sie margin-inline, anstatt linke und rechte Ränder separat festzulegen. Hier geht es nicht nur um die Unterstützung verschiedener Sprachen, sondern auch darum, besseres, widerstandsfähigeres CSS zu schreiben. Eine mit logischen Eigenschaften erstellte Komponente ist von Natur aus wiederverwendbarer und anpassungsfähiger, unabhängig davon, ob sie in einem LTR-, RTL- oder vertikalen Layout verwendet wird. Es ist einfach eine bessere Technik.

Fazit: Umarmen Sie den Fluss

CSS Logical Properties Level 2 ist nicht nur eine Sammlung neuer Funktionen, sondern die Vollendung einer Vision. Es bietet die letzten, entscheidenden Teile, die benötigt werden, um Layouts zu erstellen, die den natürlichen Fluss ihres Inhalts respektieren, wie auch immer dieser Fluss aussehen mag. Indem wir Eigenschaften wie float: inline-start und border-start-start-radius übernehmen, heben wir unser Handwerk vom einfachen Positionieren von Feldern auf einem Bildschirm zum Entwerfen wirklich globaler, integrativer und zukunftssicherer Weberlebnisse ab.

Wenn Sie das nächste Mal ein neues Projekt starten oder eine neue Komponente erstellen, halten Sie inne, bevor Sie margin-left eingeben. Fragen Sie sich: "Meine ich links oder meine ich Start?" Indem Sie diese kleine mentale Verschiebung vornehmen, tragen Sie zu einem anpassungsfähigeren und zugänglicheren Web für alle und überall bei.